<!--detail-->
<template>
  <div class="order_detail_box">
    <el-form :model="dataForm" size="small" :inline="true">
      <div class="inline_flex">
        <el-form-item label="订单编号：">
          <div>{{ dataForm.test }}</div>
        </el-form-item>
        <el-form-item style="padding-left: 83px">
          <div class="orange_clr">{{ dataForm.test }}</div>
        </el-form-item>
      </div>
      <div class="inline_flex">
        <el-form-item label="订单时间：">
          <div>{{ dataForm.test }}</div>
        </el-form-item>
        <el-form-item label="处理时间：">
          <div>{{ dataForm.test }}</div>
        </el-form-item>
      </div>
      <div class="inline_flex">
        <ul class="list">
          <li class="icon">
            <div class="lk_icon blue_bgc">装</div>
            <div class="rt_cont">
              <div class="tt weight">
                <span>杨小强</span>
                <span>18512546035</span>
              </div>
              <div class="sub">
                <span>山东</span>
                <span>烟台</span>
                <span>莱州</span>
                <span>莱州市文昌办电子10005号</span>
              </div>
            </div>
          </li>
          <li class="collapse">
            <div class="box">
              <Title title="中途装货地" clr="blue_bgc" size="12"></Title>
              <ul class="grid">
                <li>
                  <span>山东</span>
                  <span>烟台</span>
                  <span>莱阳</span>
                  <span>富水南路1号</span>
                </li>
                <li>
                  <span>山东</span>
                  <span>烟台</span>
                  <span>莱阳</span>
                  <span>富水南路100号</span>
                </li>
              </ul>
            </div>
          </li>
          <li class="icon">
            <div class="lk_icon orange_bgc">卸</div>
            <div class="rt_cont">
              <div class="tt weight">
                <span>杨小强</span>
                <span>18512546035</span>
              </div>
              <div class="sub">
                <span>山东</span>
                <span>烟台</span>
                <span>莱州</span>
                <span>莱州市文昌办电子10005号</span>
              </div>
            </div>
          </li>
          <li class="collapse">
            <div class="box">
              <Title title="中途卸货地" clr="orange_bgc" size="12"></Title>
              <ul class="grid">
                <li>
                  <span>河北</span>
                  <span>唐山</span>
                  <span>路南</span>
                  <span>路南区小山街道南厂东西里</span>
                </li>
              </ul>
            </div>
          </li>
          <li class="no_icon weight">
            <span>整车</span>
            <span>9.6/13/17.5米/占6.8米</span>
            <span>高栏/平板</span>
            <span>2.5吨/设备</span>
            <span>处理时间：2020-04-29</span>
          </li>
        </ul>
      </div>
    </el-form>
    <div class="tab_list">
      <div class="tab_item">
        <Title title="备注信息" clr="blue_bgc" size="14"></Title>
        <p>定金优先通过平台支付</p>
      </div>
      <div class="tab_item">
        <Title title="订单信息" clr="blue_bgc" size="14"></Title>
        <p>交易时间：2020-05-01 12:12:12</p>
      </div>
      <div class="tab_item">
        <Title title="车辆信息" clr="blue_bgc" size="14"></Title>
        <p>刘师傅 15705922222</p>
        <p>鲁UN5223 / 6.8米 / 高栏</p>
      </div>
      <div class="tab_item">
        <Title title="付款状态" clr="blue_bgc" size="14"></Title>
        <p>运费支付方式：货到现金/平台支付</p>
        <ul class="tb_ul">
          <li>
            <span class="lb">运费总价:</span>
            <span class="red_clr">3000元</span>
            <span class="green_clr">已付款</span>
          </li>
          <li>
            <span class="lb">信息费用:</span>
            <span class="red_clr">100元</span>
            <span class="green_clr">已付款</span>
            <span class="nor">微信个人号A15</span>
          </li>
          <li>
            <span class="lb">到账金额:</span>
            <span class="red_clr">100元</span>
            <span class="green_clr">已到账</span>
          </li>
          <li>
            <span class="lb">交易时间:</span>
            <span>2020-05-01 12:12:12</span>
          </li>
        </ul>
      </div>
      <div class="tab_item">
        <Title title="操作记录" clr="blue_bgc" size="14"></Title>
        <ul class="tb_ul">
          <li>
            <span class="nor">2020-05-01</span>
            <span class="nor">货主维护</span>
            <span class="nor">归属</span>
            <span class="nor">汇丰徐</span>
          </li>
          <li>
            <span class="nor">2020-05-01</span>
            <span class="nor">货源录入</span>
            <span class="nor">汇丰徐</span>
          </li>
          <li>
            <span class="nor">2020-05-01</span>
            <span class="nor">货源谈判</span>
            <span class="nor">汇丰周</span>
          </li>
          <li>
            <span class="nor">2020-05-01</span>
            <span class="nor">车源谈判</span>
            <span class="nor">汇丰周</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Title from './title';

export default {
  components: {
    Title,
  },
  data () {
    return {
      dataForm: { test: 'test' }
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
@import '@/style/second.scss';
.order_detail_box {
  .el-form {
    .el-form-item {
      margin-bottom: 0px;
    }
  }
  .list {
    > li {
      padding: 10px 0;
      overflow: hidden;
      font-size: 14px;
    }
    .icon {
      position: relative;
      .lk_icon {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #ffffff;
        position: absolute;
        top: 50%;
        margin-top: -15px;
      }
      .rt_cont {
        display: block;
        padding-left: 45px;
        .tt {
          span {
            line-height: 24px;
            &:not(:first-child) {
              margin-left: 10px;
            }
          }
        }
        .sub {
          span {
            line-height: 22px;
            &:not(:first-child) {
              margin-left: 10px;
            }
          }
        }
      }
    }
    .no_icon {
      span {
        line-height: 22px;
        &:not(:first-child) {
          margin-left: 10px;
        }
      }
      .tt {
        span {
          line-height: 22px;
          &:not(:first-child) {
            margin-left: 10px;
          }
        }
      }
      .sub {
        span {
          line-height: 22px;
          &:not(:first-child) {
            margin-left: 10px;
          }
        }
      }
    }
    .collapse {
      padding-left: 45px;
      .box {
        background-color: #f6f7fa;
        padding: 6px;
        .grid {
          padding: 3px 6px;
          > li {
            padding: 6px 0;
          }
        }
      }
    }
  }
  .weight {
    font-weight: 600;
  }
  .btn_group {
    text-align: center;
    margin: 25px 0 10px;
  }
  .tab_list {
    width: 50%;
    .tab_item {
      margin: 12px 0;
      background-color: #f6f7fa;
      padding: 5px;
      > p {
        font-size: 14px;
        padding: 10px 6px 6px;
      }
      .tb_ul {
        padding: 10px;
        > li {
          line-height: 22px;
          .nor {
            margin-right: 10px;
            font-size: 14px;
          }
          .lb {
            font-size: 14px;
            color: #454545;
            margin-right: 5px;
          }
          .red_clr,
          .green_clr {
            margin-right: 10px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>